<template>
    <div class="xunjingwendao">
        <Navbar :activeMenu="currentPath" />

        <div class="main container">

            <div class="center" style="display: flex;">
                <!-- <div class="daquan">
                    <h3 class="title">
                        <p class="line">八字排盘</p>
                    </h3>
                    <p class="content">
                        算命与占卜，是世界各国所共有的神秘文化现象，反映了人类对未知命运的求知心理，其中虽不乏迷信的成份，亦有诸多合理的思维。本站测试项目主要根据中华传统周易学或民间流传的占卜法制定，测试结果仅供娱乐参考。
                    </p>
                </div> -->
                <div class="zonghe" style="width: 50%;">
                    <h3 class="title">
                        <p class="line">姓名八字综合测算</p>
                    </h3>
                    <div class="content">
                        <el-form :model="form" class="demo-form-inline">
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="姓名" label-width="100px">
                                        <el-input style="width: 100%;height: 36px;" v-model="form.name"
                                            placeholder="姓名"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="性别" label-width="100px">
                                        <el-select style="width: 100%;" v-model="form.sex" placeholder="选择性别">
                                            <el-option label="男" value="0"></el-option>
                                            <el-option label="女" value="1"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>


                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="生日" label-width="100px">
                                        <el-input style="width: 100%;" v-model="form.birthday"
                                            @focus="dialogVisible = true" placeholder="请选择出生日期"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="出生地" label-width="100px">
                                        <el-input placeholder="请选择出生地" style="width: 100%;" v-model="csdq"
                                            @focus="dialogVisibleArea = true"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="经纬度" label-width="100px">
                                        <el-input style="width: 100%;" v-model="jingweidu"
                                            aria-placeholder=""></el-input>
                                    </el-form-item>
                                </el-col>

                            </el-row>
                            <el-row style="text-align: center;">
                                <el-col :span="24">
                                    <el-form-item style="text-align: center;">
                                        <el-button type="primary" @click="onSubmit">查询</el-button>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </div>
                    <div class="carousel-container">
                        <el-carousel :interval="4000" arrow="always" height="300px">
                            <el-carousel-item v-for="(item, index) in swiperList" :key="index">

                                <img :src="item.coverImage" alt="" style="width: 100%; height: auto;">
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                </div>
                <div class="zonghe" style="height:100%;width: 50%;">
                    <h3 class="title">
                        <p class="line">万年历</p>
                    </h3>
                    <div class="app-download">
                        <!-- <div class="app_down_link">
                            <div class="down_code">
                                <div class="down_address">
                                    <a href="https://www.xjwd.net/download/__UNI__F80CB29__20241216175816.apk"
                                        style="color: blue">点击下载APP</a>
                                </div>
                                <div class="scan">
                                    <img src="../assets/h5.png" alt="扫码访问手机版" />
                                </div>
                            </div>
                        </div>
                        <div class="app_instro"><span>应用介绍</span></div>
                        <p class="app_instro_text">
                            寻经问道APP，将能量与现代科技融合，让探索命运变得触手可及。无需专业命理师，用户只需输入出生年月日时，即可迅速获取个人四柱八字命盘。
                            该APP不仅提供八字排盘服务，更通过先进算法精准解读天干地支的相互作用，为用户提供个性化的命运分析、性格剖析及流年运势预测。无论是想了解自己的天赋潜能，还是预测未来趋势，寻经问道APP都能为你提供有价值的参考。
                            此外，APP内置丰富的命理知识库，涵盖天干地支、五行生克、十二官位等基础知识，方便用户深入学习命理学。界面设计简洁明了，操作流程直观易懂，无需专业知识也能轻松上手。
                            寻经问道APP以开放但不迷信的态度，结合个人实际情况，为用户提供来自古老智慧的现代启示。它不仅是一款工具，更是一个了解自我、规划未来的助手。无论你是命理初学者还是资深爱好者，都能从中获得有益的指导与启示。
                            总之，寻经问道APP是探索命运、认识自我的绝佳选择。
                        </p> -->
                        <div class="full-screen-iframe-container">
                            <iframe src="https://www.xjwd.net/wnl/" frameborder="0" class="full-screen-iframe"></iframe>
                        </div>

                    </div>
                </div>

                <div class="cl"></div>
            </div>



            <div class="cl"></div>

        </div>
        <Footer />
        <el-dialog :visible.sync="dialogVisible" width="30%">
            <e-run-calendar ref="betterCalendarRef" :showCalendar="true" @confirm="selectDate" :isHourShow="true"
                :selectOptions="selectOptionsArr"></e-run-calendar>
        </el-dialog>
        <el-dialog :visible.sync="dialogVisibleArea" width="30%">
            <el-select class="year-select" v-model="form.province" placeholder="选择省份" @change="handleProviceChange">
                <el-option v-for="item in columns[0]" :key="item" :label="item" :value="item"></el-option>
            </el-select>

            <el-select class="year-select" v-model="form.city" placeholder="选择城市" @change="handleCityChange">
                <el-option v-for="item in columns[1]" :key="item" :label="item" :value="item"></el-option>
            </el-select>
            <el-select class="year-select" v-model="form.area" placeholder="选择区县" @change="handleAreaChange">
                <el-option v-for="item in columns[2]" :key="item" :label="item" :value="item"></el-option>
            </el-select>
            <div slot="footer" class="dialog-footer" style="text-align: center;">
                <el-button @click="dialogVisibleArea = false">取 消</el-button>
                <el-button type="primary" @click="onSubmitCsd">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { jingweidu, recordAdd, courseTypeListOne, bannerList } from "@/api/index"
import eRunCalendar from "@/components/e-run-calendar/e-run-calendar.vue";
import dataJsonArr from "@/assets/js/diqu_arr.json";

export default {
    name: "Index",
    components: {
        eRunCalendar,
    },
    mounted() {
        this.diquchushihua();
        this.getcourseTypeListOne()
        this.getBanner()
    },
    computed: {
        currentPath() {
            return '/'; // 获取当前路由路径
        },
    },
    methods: {
        diquchushihua() {


            this.diquData = dataJsonArr;
            console.log(this.diquData);
            this.diquData.forEach((item) => {
                this.province = [...this.province, item.label];

            });
            // 设置默认省份：北京
            this.$set(this.columns, 0, this.province);

        },
        onSubmit() {
            if (!this.form.name) {
                this.$message.error('请输入姓名')
                return
            }
            if (!this.form.birthday) {
                this.$message.error('请选择出生日期')
            }
            if (!this.csdq) {
                this.$message.error('请选择出生地区')
                return
            }
            if (!this.form.birthday) {
                this.$message("请选择出生日期")
                return false;
            }


            this.addPaipanRecord()
            localStorage.setItem('arrangeEightFormStorage', JSON.stringify(this.form));
            this.$router.push({
                path: '/paipan',
            })

        },
        getcourseTypeListOne() {

            courseTypeListOne({}).then((res) => {
                console.log(res)
                let courseTypeOne = JSON.stringify(res.data)


                localStorage.setItem('courseType', courseTypeOne)
            })
        },
        addPaipanRecord() {
            let data = {
                name: this.form.name,
                sex: this.form.sex,
                birthday: this.form.birthday,
                year: this.form.year,
                cityFull: this.form.cityFull,
                isLunar: this.form.isLunar,
                defaultIndex: [0, 0, 0],
                dimension: this.jingweidu
            }
            recordAdd(data).then((res) => {
                console.log(res, "保存排盘记录")
            })
        },
        getjingweidu() {
            let data = {
                // 这里放置你要传递的参数
                sheng: this.form.province,
                shi: this.form.city,
                qu: this.form.area,
            }

            jingweidu(data).then((res) => {
                if (res.msg != '') {
                    this.jingweidu = res.msg;
                } else {
                    this.jingweidu = "东经:101.811'北纬：36.6045"
                }
            })

        },
        handleProviceChange(value) {
            this.$set(this.columns, 2, []);
            this.area = [];
            this.city = []
            this.cityAll = []
            this.diquData.forEach((item) => {
                if (item.label == value) {
                    item.children.forEach((val) => {

                        this.cityAll = [...this.cityAll, val]
                        console.log(this.cityAll)
                        this.city = [...this.city, val.label];
                        if (item.children[0].label == val.label) {
                            console.log(item.children[0].children)
                            item.children[0].children.forEach((b) => {
                                this.columns[2].push(b)

                            })

                        }

                    });

                }
            });
            console.log(this.city)
            this.columns.splice(1, 1, this.city);
            this.form.city = this.city[0]
            this.form.area = this.columns[2][1]
        },
        handleCityChange(value) {
            this.area = [];
            console.log(this.cityAll)
            this.cityAll.forEach((item) => {
                if (item.label == value) {
                    item.children.forEach((val) => {
                        this.area = [...this.area, val];
                    });

                }

            });

            this.columns.splice(2, 1, this.area);
            this.form.area = this.area[0]
        },
        handleAreaChange(value) {
            console.log(value);
        },
        onSubmitCsd() {
            if (!this.form.province || !this.form.city || !this.form.area) {
                this.$message.error('请选择出生地区')
                return
            }
            let provice = this.form.province;
            let city = this.form.city;
            let area = this.form.area.replace(/\s+/g, '');
            console.log(provice, city, area)
            this.form.cityFull = provice + '/' + city + '/' + area;
            this.csdq = this.form.cityFull;
            this.showArea = false;
            this.getjingweidu()
            this.form.zhen = 2;
            this.dialogVisibleArea = false;
        },
        getBanner() {
            bannerList({}).then((res) => {


                this.swiperList = res;


            })
        },
        selectDate(e) {
            this.showTime = false;
            this.form.birthday = e.text;

            console.log(e);
            if (e.type === "lunar") {
                // 农历
                this.form.isLunar = 1;
                this.form.type = 0;
            } else {
                // 公历
                this.form.isLunar = 0;
                this.form.type = 1;
            }

            this.form.year = e.year;

            this.form.month = e.month;
            this.form.day = e.day;
            this.form.hours = e.hour;
            this.form.minute = e.minute;
            this.dialogVisible = false;
            console.log(this.form)
            // 农历日期不对,需要改动
        },
    },
    data() {
        return {
            dialogVisible: false,
            dialogVisibleArea: false,
            selectValue: [124, 9, 10, 10, 10], // 默认弹出选择的状态1998-10-16 0
            selectOptionsArr: [30, 0, 0, 0], //是否显示组件
            dataJsonArr,
            province: '',
            columns: [[], ['市辖区'], []],
            city: '',
            area: '',
            jingweidu: '',
            csdq: "",
            cityAll: [],
            swiperList: [

            ],
            diquData: [],
            form: {
                Siling: "0",
                name: "",
                ztys: "1",
                Sect: "1",
                sex: "0",
                leixinggg: "0",
                birthday: null,
                date: "",
                time: "",
                isLunar: 0,
                year: null,
                month: null,
                day: null,
                hours: null,
                minute: null,
                zhen: 2,
                province: "",
                cityShi: "",
                type: 0,
                city: "",
                cityFull: "",
                defaultIndex: [0, 0, 0],
                dimension: "",
            },
            msg: "Welcome to Your Vue.js App",
        };
    },
};
</script>
<style>
.year-select {
    margin: 10px;
}

.full-screen-iframe-container {
    position: relative;
    width: 100%;
    height: 1150px;

    /* 使用视口高度 */
    overflow: hidden;
}

.full-screen-iframe {
    width: 100%;
    height: 100%;
    border: none;
}
</style>